<template>
  <div class="paper-review-container">
    <!-- 顶部导航区 -->
    <div class="page-header">
      <el-button 
        class="back-button" 
        type="primary" 
        plain 
        @click="goToTaskManage">
        <el-icon><ArrowLeft /></el-icon>
        返回批阅任务管理
      </el-button>
      <div class="page-title">试卷批阅系统</div>
    </div>

    <!-- 信息区域 -->
    <div class="review-content">
      <!-- 批阅信息卡片 -->
      <el-card class="info-card review-info-card" shadow="hover">
        <div class="card-header">
          <div class="header-icon"><el-icon><Document /></el-icon></div>
          <div class="header-title">批阅信息</div>
        </div>
        <div class="card-content">
          <div class="info-item">
            <span class="info-label">考试名称：</span>
            <span class="info-value">{{ allStudentPaperInfo.examinationName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷满分：</span>
            <span class="info-value">{{ allStudentPaperInfo.paperFullMark }}</span>
          </div>
          <div class="info-item">
            <span class="info-label" v-if="route.query.strategy === 'batch'">批阅情况：</span>
            <div class="progress-wrapper">
           
              <span v-if="route.query.strategy === 'batch'" class="progress-text">{{ allStudentPaperInfo.doneTotal }}/{{ allStudentPaperInfo.total }} 张</span>
            </div>
          </div>
        </div>
  </el-card>

      <!-- 学生信息卡片 -->
      <el-card class="info-card student-info-card" shadow="hover">
        <div class="card-header">
          <div class="header-icon"><el-icon><User /></el-icon></div>
          <div class="header-title">学生信息</div>
        </div>
        <div class="card-content">
          <div class="student-details">
            <div class="info-item">
              <span class="info-label">姓名：</span>
              <span class="info-value">{{ studentPaperInfo.studentData?.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">学号：</span>
              <span class="info-value">{{ studentPaperInfo.studentData?.account }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">班级：</span>
              <span class="info-value">{{ studentPaperInfo.studentData?.classesName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">当前分数：</span>
              <span class="info-value highlight">{{ studentPaperInfo.studentData?.totalScore }}</span>
            </div>
          </div>
          <div class="info-item">
            <span class="info-label">试卷状态：</span>
            <el-tag 
              class="status-tag" 
              type="danger" 
              effect="dark"
              v-if="studentPaperInfo.studentData?.examinationStatus === 0">
              未批阅
            </el-tag>
            <el-tag 
              class="status-tag" 
              type="warning" 
              effect="dark"
              v-if="studentPaperInfo.studentData?.examinationStatus === 1">
              批阅中
            </el-tag>
            <el-tag 
              class="status-tag" 
              type="success" 
              effect="dark"
              v-if="studentPaperInfo.studentData?.examinationStatus === 2">
              已批阅
            </el-tag>
          </div>
          <div class="paper-navigation">
            <el-button 
              v-if="route.query.strategy === 'batch'"
              class="nav-button" 
              type="primary" 
              plain 
              @click="prevPaper" 
              :disabled="currentPaperIndex <= 1">
              <el-icon><ArrowLeft /></el-icon>
              上一份
            </el-button>
            <div class="paper-counter"  v-if="route.query.strategy === 'batch'">
              <span class="current">{{ currentPaperIndex }}</span>
              <span class="separator">/</span>
              <span class="total">{{ totalPapers }}</span>
            </div>
            <el-button 
              v-if="route.query.strategy === 'batch'"
              class="nav-button" 
              type="primary" 
              plain 
              @click="nextPaper" 
              :disabled="currentPaperIndex >= totalPapers">
              <el-icon><ArrowRight /></el-icon>
              下一份
            </el-button>
          </div>
        </div>
  </el-card>

      <!-- 试卷内容与评分卡片 -->
      <el-card class="main-card question-card" shadow="hover">
        <div class="card-header">
          <div class="header-icon"><el-icon><Collection /></el-icon></div>
          <div class="header-title">试卷批阅</div>
          <div class="question-navigation">
        

            <InteractiveLeft text="上一题"   @click="prevQuestion"  class="custom-button" />
            <div class="question-counter">
              <span class="current">{{ currentQuestionIndex }}</span>
              <span class="separator">/</span>
              <span class="total">{{ totalQuestions }}</span>
            </div>
            <InteractiveHoverButton text="下一题"  @click="nextQuestion"  class="custom-button" />


          </div>
        </div>
        
        <div class="card-content">
          <transition name="fade" mode="out-in">
            <div :key="currentQuestionIndex" class="question-content-wrapper">
              <!-- 题目信息 -->
              <div class="question-header">
                <div class="question-title">
                  <span class="question-order">{{ currentQuestion?.questionOrder }}.</span>
                  <span class="question-name">{{ currentQuestion?.questionName }}</span>
                  <span class="question-score">({{ currentQuestion?.score }}分)</span>
                </div>
              </div>
              
              <div class="question-body">
                <div class="question-content">{{ currentQuestion?.questionContent }}</div>
                
                <!-- 答案区域 -->
                <div class="answers-section">
                  <div class="answer-box student-answer">
                    <div class="answer-box-header">
                      <el-icon><EditPen /></el-icon>
                      <span>学生答案</span>
                    </div>
                    <div class="answer-content">{{ currentQuestion?.studentAnswer }}</div>
                    
                    <!-- 老师评语部分 -->
                    <div class="teacher-comment-section">
                      <div class="comment-header">
                        <el-icon><ChatRound /></el-icon>
                        <span>老师评语</span>
                      </div>
                      <el-input
                        :disabled="route.query.isExpired === 'true'"
                        v-model="teacherComment"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入对学生答案的评语..."
                        resize="none"
                        class="comment-input"
                      />
                    </div>
                  </div>
                  
                  <div class="right-side-content">
                    <div class="answer-box reference-answer">
                      <div class="answer-box-header">
                        <el-icon><Check /></el-icon>
                        <span>参考答案</span>
                      </div>
                      <div class="answer-content">{{ currentQuestion?.referenceAnswer }}</div>
                    </div>
                    
                    <!-- 评分细则 -->
                    <div class="grading-rules">
                      <div class="grading-rules-header">
                        <el-icon><List /></el-icon>
                        <span>评分细则</span>
                      </div>
                      <div class="grading-rules-content">
                        <div class="rule-item" v-for="(item, index) in currentQuestion?.gradingRules" :key="index" v-html="item"></div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 评分区域 -->
                <div class="scoring-section">
                  <div class="score-input">
                    <span class="score-label">得分：</span>
    <el-input-number 
     :disabled="route.query.isExpired === 'true'"
     v-model="finalScore" 
     :min="0" 
     :max="currentQuestion?.score" 
     :step="0.5" 
     size="large"
     class="score-input-number"
     ></el-input-number>
                  </div>
                  
                  <div class="action-buttons" v-if="route.query.isExpired !== 'true'">
                    <el-button 
                      type="primary" 
                      @click="handleSaveCurrentCheck"
                      class="action-button save-button">
                      <el-icon><Check /></el-icon>
                      保存当前批阅
                    </el-button>
                    <el-button 
                      type="success" 
                      @click="saveScoreAndNext"
                      class="action-button next-button">
                      <el-icon><ArrowRight /></el-icon>
                      保存并进入下一题
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import useReview from '@/hooks/server/useMarkPaper'
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useServerUserStore } from '@/stores/modules/user-server'
// 导入Element Plus图标
import { 
  Document, 
  User, 
  Collection, 
  EditPen, 
  Check, 
  List, 
  ArrowLeft, 
  ArrowRight,
  ChatRound
} from '@element-plus/icons-vue'

const route = useRoute()
const userStore = useServerUserStore()

const { 
  allStudentPaperInfo,
  studentPaperInfo,
  currentQuestion,
  finalScore,
  teacherComment,

  fetchReviewAssignmentList,
  goToTaskManage,
  saveCurrentCheckofHook
 } = useReview()

// 老师评语

onMounted(async () => {

  
  await fetchReviewAssignmentList({reviewAssignmentId: route.query.reviewAssignmentId,uniquePaperId: [route.query.uniquePaperIds[0]]})
  totalPapers.value = allStudentPaperInfo.value.total
  totalQuestions.value = studentPaperInfo.value.studentPaperDetail.length
  finalScore.value = currentQuestion.value.finalScore ? currentQuestion.value.finalScore : 0
  // 初始化评语
  teacherComment.value = currentQuestion.value.checkDetail ? currentQuestion.value.checkDetail : ''
 

  

  })

// 点击上一份、下一份
const currentQuestionIndex = ref(1)
const currentPaperIndex = ref(1)
const totalPapers = ref(0)
const prevPaper = async () => {
  if(currentPaperIndex.value >= 2){
    currentPaperIndex.value--
    await fetchReviewAssignmentList({reviewAssignmentId: route.query.reviewAssignmentId,uniquePaperId: [route.query.uniquePaperIds[currentPaperIndex.value-1]]})
 
    currentQuestionIndex.value = 1

  }else{
    ElMessage.warning('已经是第一份试卷了')
  }
}
const nextPaper = async () => {
  if(currentPaperIndex.value < totalPapers.value){
  
    await fetchReviewAssignmentList({reviewAssignmentId: route.query.reviewAssignmentId,uniquePaperId: [route.query.uniquePaperIds[currentPaperIndex.value]]})
    currentPaperIndex.value++
    currentQuestionIndex.value = 1

  }else{
    ElMessage.warning('已经是最后一份试卷了')
  }
}

// 点击上一题、下一题
const totalQuestions = ref(0)
const prevQuestion = () => {
  if(currentQuestionIndex.value >= 2){
    // 当前问题的下标减1
    currentQuestionIndex.value--
    // 当前试卷的 当前主观题
    currentQuestion.value = studentPaperInfo.value.studentPaperDetail[currentQuestionIndex.value - 1]
    finalScore.value = currentQuestion.value.finalScore ? currentQuestion.value.finalScore : 0
    // 加载评语
    teacherComment.value = currentQuestion.value.checkDetail ? currentQuestion.value.checkDetail : ''
  }else{
    ElMessage.warning('已经是第一题了')
  }
}
const nextQuestion = () => {
  if(currentQuestionIndex.value < totalQuestions.value){
    currentQuestionIndex.value++  
    currentQuestion.value = studentPaperInfo.value.studentPaperDetail[currentQuestionIndex.value - 1]
    finalScore.value = currentQuestion.value.finalScore ? currentQuestion.value.finalScore : 0
    // 加载评语
    teacherComment.value = currentQuestion.value.checkDetail ? currentQuestion.value.checkDetail : ''
  }else{
    ElMessage.warning('已经是最后一题了')
  }
}


// 保存当前批阅
const handleSaveCurrentCheck = async () => {
  
  await saveCurrentCheckofHook({
    reviewAssignmentId: route.query.reviewAssignmentId,
    paperDetailId: currentQuestion.value.id,
    checkDetail: teacherComment.value, // 添加评语到保存参数中
    finalScore: finalScore.value,
    userId: userStore.userInfo.id
  })

  await fetchReviewAssignmentList({reviewAssignmentId: route.query.reviewAssignmentId,uniquePaperId: [route.query.uniquePaperIds[currentPaperIndex.value - 1]]})
  currentQuestion.value = studentPaperInfo.value.studentPaperDetail[currentQuestionIndex.value - 1]
  finalScore.value = currentQuestion.value.finalScore ? currentQuestion.value.finalScore : 0
  teacherComment.value = currentQuestion.value.checkDetail ? currentQuestion.value.checkDetail : ''
}

// 保存并进入下一题
const saveScoreAndNext = async () => {
  await handleSaveCurrentCheck()
  nextQuestion()
}

</script>

<style scoped lang="scss">
.paper-review-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  
  .back-button {
    transition: all 0.3s;
    &:hover {
      transform: translateX(-3px);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
  
  .page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    letter-spacing: 1px;
  }
}

.review-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.info-card {
  border-radius: 8px;
  transition: all 0.3s;
  margin-bottom: 20px;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
    
    .header-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #ecf5ff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      
      .el-icon {
        font-size: 16px;
        color: #409eff;
      }
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .card-content {
    padding: 0 10px;
  }
}

.review-info-card {
  grid-column: span 4;
  
  .progress-wrapper {
   
    
   
    
    .progress-text {
      font-size: 16px;
      color: #67c23a;
      font-weight: 500;
    }
  }
}

.student-info-card {
  grid-column: span 8;
  
  .student-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .status-tag {
    transition: all 0.3s;
    transform-origin: center;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  .paper-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    
    .nav-button {
      transition: all 0.3s;
      
      &:hover:not(:disabled) {
        transform: translateX(-3px);
      }
      
      &:last-child:hover:not(:disabled) {
        transform: translateX(3px);
      }
    }
    
    .paper-counter {
      margin: 0 15px;
      font-size: 16px;
      font-weight: 600;
      padding: 0 10px;
      background-color: #f2f6fc;
      border-radius: 4px;
      min-width: 70px;
      text-align: center;
      
      .current {
        color: #409eff;
      }
      
      .separator {
        margin: 0 3px;
        color: #909399;
      }
      
      .total {
        color: #606266;
      }
    }
  }
}

.main-card {
  grid-column: span 12;
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
    
    .header-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #f0f9eb;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      
      .el-icon {
        font-size: 18px;
        color: #67c23a;
      }
    }
    
    .header-title {
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      flex: 1;
    }
    
    .question-navigation {
      display: flex;
      align-items: center;
      
      .nav-button {
        transition: all 0.3s;
        
        &:hover:not(:disabled) {
          transform: translateX(-3px);
        }
        
        &:last-child:hover:not(:disabled) {
          transform: translateX(3px);
        }
      }
      
      .question-counter {
        margin: 0 15px;
        font-size: 16px;
        font-weight: 600;
        padding: 0 10px;
        background-color: #f2f6fc;
        border-radius: 4px;
        min-width: 80px;
        min-height: 37px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .current {
          color: #409eff;
        }
        
        .separator {
          margin: 0 3px;
          color: #909399;
        }
        
        .total {
          color: #606266;
        }
      }
    }
  }
}

.question-content-wrapper {
  padding: 0 10px;
  
  .question-header {
    margin-bottom: 20px;
    
    .question-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      padding: 10px 15px;
      background-color: #f8f9fa;
      border-radius: 6px;
      border-left: 4px solid #409eff;
      
      .question-order {
        margin-right: 5px;
        color: #409eff;
      }
      
      .question-score {
        color: #f56c6c;
        margin-left: 10px;
        font-weight: 500;
      }
    }
  }
  
  .question-body {
    .question-content {
      padding: 15px;
      background-color: #f9fafc;
      border-radius: 6px;
      margin-bottom: 20px;
      color: #303133;
      line-height: 1.6;
    }
  }
}

.answers-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
  
  .answer-box {
    border-radius: 8px;
    border: 1px solid #ebeef5;
    overflow: hidden;
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .answer-box-header {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #ebeef5;
      
      .el-icon {
        font-size: 18px;
      }
    }
    
    .answer-content {
      padding: 15px;
      min-height: 120px;
      line-height: 1.6;
      color: #606266;
    }
  }
  
  .student-answer {
    .answer-box-header {
      background-color: #ecf5ff;
      color: #409eff;
    }
    
    .teacher-comment-section {
      padding: 0 15px 15px;
      border-top: 1px dashed #ebeef5;
      
      .comment-header {
        padding: 12px 0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #f56c6c;
        
        .el-icon {
          font-size: 18px;
        }
      }
      
      .comment-input {
        border-radius: 4px;
        
        :deep(.el-textarea__inner) {
          background-color: #fff9f9;
          border-color: #ffd6d6;
          padding: 10px;
          font-size: 14px;
          
          &:focus {
            border-color: #f56c6c;
            box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
          }
          
          &::placeholder {
            color: #fab6b6;
          }
        }
      }
    }
  }
  
  .right-side-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    .reference-answer {
      .answer-box-header {
        background-color: #f0f9eb;
        color: #67c23a;
      }
      
      .answer-content {
        min-height: 80px;
      }
    }
  }
}

.grading-rules {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  
  .grading-rules-header {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    background-color: #fdf6ec;
    color: #e6a23c;
    
    .el-icon {
      font-size: 18px;
    }
  }
  
  .grading-rules-content {
    padding: 15px;
    max-height: 200px;
    overflow-y: auto;
    
    .rule-item {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed #ebeef5;
      line-height: 1.6;
      color: #606266;
      
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}

.scoring-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  
  .score-input {
    display: flex;
    align-items: center;
    
    .score-label {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-right: 10px;
    }
    
    .score-input-number {
      :deep(.el-input-number__increase),
      :deep(.el-input-number__decrease) {
        transition: all 0.2s;
        
        &:hover {
          transform: scale(1.1);
        }
      }
      
      :deep(.el-input__inner) {
        font-size: 18px;
        font-weight: 600;
        color: #f56c6c;
      }
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 15px;
    
    .action-button {
      transition: all 0.3s;
      padding: 12px 20px;
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
    }
    
    .save-button {
      background-color: #409eff;
      
      &:hover {
        background-color: #66b1ff;
      }
    }
    
    .next-button {
      background-color: #67c23a;
      
      &:hover {
        background-color: #85ce61;
      }
    }
  }
}

.info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  
  .info-label {
    font-weight: 600;
    color: #606266;
    min-width: 80px;
  }
  
  .info-value {
    color: #303133;
    
    &.highlight {
      color: #f56c6c;
      font-weight: 600;
      font-size: 16px;
    }
  }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .review-content {
    display: flex;
    flex-direction: column;
  }
  
  .answers-section {
    grid-template-columns: 1fr;
  }
  
  .scoring-section {
    flex-direction: column;
    gap: 20px;
    
    .score-input {
      margin-bottom: 15px;
    }
  }
}
</style>
